<div class="needs-validation">
  <div class="form-group form-check">
    <input [(ngModel)]="data.required" class="form-check-input" type="checkbox">
    <label class="form-check-label">
      Required
    </label>
  </div>
  <div class="form-group">
    <label>Name:</label>
    <input [(ngModel)]="data.name" type="text" class="form-control" value="{{data.name}}" lowercase disabled>
    <small class="form-text text-muted">Use a unique field-name</small>
  </div>
  <div class="form-group">
    <label>Label:</label>
    <input [(ngModel)]="data.label" type="text" class="form-control" (ngModelChange)="calculateName(data.label)">
    <small class="form-text text-muted">a static display name</small>
  </div>
  <div class="form-group">
    <label>Description:</label>
    <textarea [(ngModel)]="data.description" class="form-control">
                        {{data.description}}
                      </textarea>
    <small class="form-text text-muted">short field description or helper text</small>
  </div>
  <div class="form-group">
    <label>Regex:</label>
    <input [(ngModel)]="data.regex" type="text" class="form-control" value="{{data.regex}}"
           (ngModelChange)="validateRegex(data.regex)" [ngClass]="{ 'is-valid': regexValid,
                 'is-invalid': !regexValid }">
    <div *ngIf="!regexValid" class="invalid-feedback">
      <div class="float-right">
       Regex is invalid!
      </div>
      <div class="clearfix"></div>
    </div>
    <small class="form-text text-muted">Regex validation</small>
  </div>
  <div class="form-group">
    <label>Placeholder:</label>
    <input [(ngModel)]="data.placeholder" type="text" class="form-control"
           value="{{data.placeholder}}">
  </div>
  <div class="form-group">
    <label>Default value:</label>
    <input [(ngModel)]="data.value" type="text" class="form-control" value="{{data.value}}">
  </div>
  <div class="form-group">
    <label>Helper text:</label>
    <input [(ngModel)]="data.helperText" type="text" class="form-control" value="{{data.helperText}}">
  </div>
  <div class="form-check">
    <input [(ngModel)]="data.access" class="form-check-input" type="checkbox" data-toggle="collapse"
           [attr.data-target]="'#access_' + data.name">
    <label class="form-check-label">
      Limit access of this field
    </label>
  </div>
  <div class="collapse" id="access_{{data.name}}">
    <div class="card card-body">
      <div class="form-group">
        <label>Limit access to groups:</label>
        <ng-select
          [items]="groupList"
          [multiple]="true"
          bindLabel="name"
          bindValue="public_id"
          placeholder="Select groups"
          [(ngModel)]="data.groups"
        >
        </ng-select>
        <small class="form-text text-muted">Multiple selection possible, leave blank if no limitation.
        </small>
      </div>
      <div class="form-group">
        <label>Limit access to specific users:</label>
        <ng-select
          [items]="userList"
          [multiple]="true"
          bindLabel="user_name"
          bindValue="public_id"
          placeholder="Select specific users"
          [(ngModel)]="data.users">
        </ng-select>
        <small class="form-text text-muted">Multiple selection possible, leave blank if no limitation.
        </small>
      </div>
    </div>
  </div>
</div>
